<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2021-present Kaleidos Ventures SL
-->

<ng-container *transloco="let t">
  <tg-ui-modal
    [width]="500"
    [open]="showEditWorkspaceModal"
    (requestClose)="cancel()">
    <div
      role="dialog"
      data-test="edit-ws-modal"
      aria-labelledby="edit-ws"
      aria-modal="true">
      <h3
        id="edit-ws"
        class="edit-ws-title"
        data-test="edit-ws-title">
        {{ t('workspace.edit.title') }}
      </h3>
      <form
        *ngIf="nameForm"
        [showFormErrors]="submitted"
        [formGroup]="nameForm"
        (submit)="submit()">
        <tg-ui-input [label]="t('workspace.edit.name')">
          <input
            formControlName="name"
            data-test="story-name"
            #title
            inputRef
            [maxlength]="maxLength"
            [placeholder]="t('workspace.edit.name_placeholder')" />
          <ng-container inputError>
            <tg-ui-error
              error="required"
              data-test="edit-name-required-error"
              >{{ t('workspace.edit.name_required') }}</tg-ui-error
            >
            <tg-ui-error error="pattern">{{
              t('workspace.edit.name_required')
            }}</tg-ui-error>
          </ng-container>
        </tg-ui-input>
        <div class="edit-ws-actions-area">
          <button
            data-test="edit-name-cancel-button"
            appearance="button-form"
            tuiButton
            (click)="cancel()"
            type="button">
            {{ t('commons.cancel') }}
          </button>
          <button
            data-test="edit-name-confirm-button"
            appearance="primary"
            tuiButton
            type="submit">
            {{ t('commons.save_changes') }}
          </button>
        </div>
      </form>
    </div>
  </tg-ui-modal>
  <tg-discard-changes-modal
    [open]="showConfirmEditWorkspaceModal"
    (discard)="discardChanges()"
    (cancel)="keepEditing()"></tg-discard-changes-modal>
</ng-container>
